<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录 - 校园论坛 - 相思湖学院</title>
<link rel="shortcut icon" href="static/image/logo_little.png">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css" >
<link rel="stylesheet" type="text/css" href="static/css/top.css" >
<link rel="stylesheet" type="text/css" href="static/css/login.css">
</head>
<body>
	<div class="top">
		<img class="logo" alt="相思湖学院论坛" src="static/image/logo.png">
		<form action="#">
			<input type="text" name="search" placeholder="请输入搜索内容">
			<input type="submit" class="submit" value="搜索">
		</form>
		<c:if test="${user != null }">
			<div class="user">
				<span><a style="font-weight: 800;color: black;" href="userinfo">${user.username }</a></span>
				<span>|</span>
				<div class="dropdown" style="display: inline-block;">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">我的<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li><a href="user?id=${user.id }&selected=mytopic">帖子</a></li>
						<!-- <li><a href="#">收藏</a></li>
						<li><a href="#">好友</a></li> -->
					</ul>
				</div>
				<span>|</span>
				<span><a href="userinfo">设置</a></span>
				<!-- <span>|</span>
				<span><a href="#">消息</a></span> -->
				<span>|</span>
				<div class="dropdown" style="display: inline-block;">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">提醒<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li><a href="notice">消息</a></li>
						<!-- <li><a href="#">新听众</a></li> -->
					</ul>
				</div>
				<span>|</span>
				<span><a href="exit">退出</a></span>
				<c:if test="${user.avatar != null && user.avatar != '' }">
					<img class="avatar" src="${user.avatar }">
				</c:if>
				<c:if test="${user.avatar == null || user.avatar == '' }">
					<img class="avatar" src="static/image/noavatar.jpg">
				</c:if>
			</div>
		</c:if>
		<c:if test="${user == null }">
			<div class="visitor">
				<a href="ps.login">登陆</a>
				<a href="${path }/register.jsp">注册</a>
			</div>
		</c:if>
	</div>
	<div class="contral">
		<c:if test="${user == null }">
			<div class="middle">
				<div class="title" style="margin-top: 0;"><h2>登录</h2><a href="${path }/register.jsp">没有账号？立即注册</a></div>
				<form action="login" method="post" onsubmit="return checksubmit()">
					<input type="hidden" name="token" value="${token }">
					<div>
						<span>用户名：</span><input type="text" id="username" name="username">
						<a href="${path }/register.jsp">立即注册</a>
					</div>
					<div>
						<span style="margin-left: 69px;">密码：</span><input type="password" id="password" name="password">
						<!-- <a href="#">找回密码</a> -->
					</div>
					<div>
						<input type="checkbox" class="pc" name="cookietime">自动登录
					</div>
					<div style="border-bottom: 0">
						<input class="submit" type="submit" value="登录"><span style="color: red;">${admitLogin }</span>
						<!-- <a href="exit" style="float: right;">清除痕迹</a> -->
					</div>
				</form>
			</div>
		</c:if>
		<c:if test="${user != null }">
			<div style="width: 300px; margin: 0 auto;">
				<h3 id="sp" style="margin-top: 140px; display: inline-block; font-size: 16px;">欢迎您回来，${user.username}，3秒后将转入主页面</h3>
			</div>
			<script type="text/javascript">
				onload = function() {
					setInterval(go, 1000);
				};
				var x = 3; //利用了全局变量来执行 
				function go() { //欢迎您回来，锋芒初露 3号到了，现在将转入登录前页面
					x--;
					if (x > 0) {
						document.getElementById("sp").innerHTML = "欢迎您回来，${user.username}，" + x + "秒后将转入主页面"; //每次设置的x的值都不一样了。 
					} else {
						location.href = 'forum';
					}
				}
			</script>
		</c:if>
	</div>
	<div class="bottom"></div>
	
	<div id="msg" class="alert alert-info" style="display: none;"></div>
</body>
<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<script type="text/javascript">
	function checksubmit() {
		if(document.getElementById('username').value == "") {
			$('<div>').appendTo('body').addClass('alert alert-info').html('请输入用户名').show().delay(1500).fadeOut();
			return false;
		} else if(document.getElementById('password').value == "") {
			$('<div>').appendTo('body').addClass('alert alert-info').html('请输入密码').show().delay(1500).fadeOut();
			return false;
		} else {
			return true;
		}
	}
</script>
<script type="text/javascript">
	var msg = '${msg}';
	if(msg != "") {
		/* $('<div>').appendTo('body').addClass('alert alert-info').html(msg).show().delay(1500).fadeOut(); */
		$('#msg').appendTo('body').html(msg).show().delay(3000).fadeOut();
	}
</script>
</html>